<template>
  <div>
    <a-alert message="开发者平台" type="info" show-icon style="margin-bottom: 18px">
      <template #description>
        使用开发者平台
        短信服务，阿里云、腾讯云、华为云一键切换，每个短信模板可单独指定发送平台，开通地址：<a
          href="http://console.21ds.cn/register"
          target="_blank"
          >立即注册</a
        >
      </template>
    </a-alert>
    <a-form
      ref="FormRef"
      :model="FormState"
      :rules="FormRule"
      :labelCol="labelCol"
      :wrapperCol="wrapperCol"
    >
      <a-form-item label="开发者key" has-feedback required name="dev_key">
        <a-input v-model:value="FormState.dev_key" placeholder="请填写开发者key" />
      </a-form-item>
      <a-form-item label="短信配置ID" has-feedback required name="ss_id">
        <a-input v-model:value="FormState.ss_id" placeholder="请填写短信配置ID" />
      </a-form-item>
      <a-form-item label="SecretKey" has-feedback required name="secret_key">
        <a-input v-model:value="FormState.secret_key" placeholder="SecretKey 用于签名生成" />
      </a-form-item>
      <a-form-item style="margin-left: 12.5%">
        <a-button type="primary" html-type="submit" :loading="ConfirmLoading" @click="OnSubmit">
          提交
        </a-button>
      </a-form-item>
    </a-form>
  </div>
</template>

<script lang="ts">
import { IconFont } from '@/components/iconfont'
import { defineComponent, reactive, toRefs, onMounted, ref, toRaw } from 'vue'
import { Row, Col } from 'ant-design-vue'
import { UploadOutlined, PaperClipOutlined } from '@ant-design/icons-vue'
import { requestSuccess, requestFailed } from '@/utils/feedback'
import { getSmsSetting, editSmsSetting } from '@/api/system'

export default defineComponent({
  name: 'UserList',
  components: {
    IconFont,
    UploadOutlined,
    PaperClipOutlined,
    [Row.name]: Row,
    [Col.name]: Col
  },
  setup() {
    const typeFormRef = ref()
    const FormRef = ref()
    const tenFormRef = ref()
    const state = reactive({
      ConfirmLoading: false,
      activeKey: ref('tab1'),
      labelCol: {
        xs: { span: 24 },
        sm: { span: 3 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      }
    })
    const FormState = reactive({
      dev_key: '',
      ss_id: '',
      secret_key: ''
    })
    const FormRule = {
      dev_key: [{ required: true, message: '请填写开发者key', trigger: ['blur', 'change'] }],
      ss_id: [{ required: true, message: '请填写短信配置ID', trigger: ['blur', 'change'] }],
      secret_key: [{ required: true, message: '请填写SecretKey', trigger: ['blur', 'change'] }]
    }
    onMounted(() => {
      getDataList()
    })

    const tabChange = () => {
      getDataList()
    }

    function getDataList() {
      getSmsSetting({}).then((res) => {
        for (let item in res) {
          FormState[item] = res[item]
        }
      })
    }
    const OnSubmit = () => {
      FormRef.value
        .validate()
        .then(() => {
          editSmsSetting(toRaw(FormState))
            .then((res) => {
              if (res.code === 200) {
                requestSuccess(res)
              } else {
                requestFailed(res)
              }
            })
            .finally(() => {
              state.ConfirmLoading = false
            })
        })
        .catch(() => {
          return false
        })
    }
    return {
      ...toRefs(state),
      FormRef,
      typeFormRef,
      tenFormRef,
      FormState,
      FormRule,
      tabChange,
      OnSubmit,
      getDataList
    }
  }
})
</script>

<style lang="scss" scoped></style>
